<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>支付</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <link rel="stylesheet" th:href="@{/lib/weui.min.css}">
    <link rel="stylesheet" th:href="@{/css/jquery-weui.css}">
</head>

<body>

<!--<header class='demos-header'>
    <h1 class="demos-title"></h1>
</header>-->

<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">会员昵称</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入昵称" id="nickName">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="mobile" placeholder="请输入手机号码">
        </div>
    </div>
    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
            <label class="weui-label">验证码</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" id="msgcode" placeholder="请输入验证码">
        </div>
        <div class="weui-cell__ft">
            <button id="btmsg" class="weui-vcode-btn">获取验证码</button>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">生日</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="date" value="" id="birthday">
        </div>
    </div>
    <div class="weui-cell">
        <p class="weui-cell__bd">
            <a id="regist" class="weui-btn weui-btn_primary">确认</a>
        </p>
    </div>
</div>

<script th:src="@{/lib/jquery-2.1.4.js}"></script>
<script th:src="@{/lib/fastclick.js}"></script>
<script th:src="@{/js/jquery-weui.js}"></script>

<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>

<script th:inline="javascript">
    var merchantId = [[${member.merchantId}]];
    var openId = [[${member.openId}]];
    var subOpenId = [[${member.subOpenId}]];
    $(function () {

        var countdownHandler = function() {
            var $button = $("#btmsg");
            var number = 60;
            var countdown = function () {
                if (number == 0) {
                    $button.attr("disabled", false);
                    $button.html("发送验证码");
                    number = 60;
                    return;
                } else {
                    $button.attr("disabled", true);
                    $button.html(number + "秒 重新发送");
                    number--;
                }
                setTimeout(countdown, 1000);
            }
            setTimeout(countdown, 1000);
        }

        /*获取验证码*/
        $("#btmsg").click(function () {
            var $mobile = $("#mobile");
            var mobile = $.trim($mobile.val());
            if(mobile == ''){
                $.toast("请输入手机号码",1500);
                return;
            }
            var reg = /^1\d{10}$/;
            if(!reg.test(mobile)) {
                $.toast("请输入合法的手机号码",1500);
                return;
            }
            $.get("/api/member/getValidateCode?phone="+mobile, function (res) {
                if (res.code == 200) {
                    countdownHandler();
                    return;
                } else {
                    $.toast(res.message, "cancel");
                }
            })
        });
        $("#regist").click(function () {
            var nickName = $("#nickName").val();
            var mobile = $("#mobile").val();
            var msgcode = $("#msgcode").val();
            var birthday = $("#birthday").val();

            if(nickName == null || nickName == undefined || nickName == NaN){
                $.toast("会员昵称不能为空",1500);
                return;
            }
            if(mobile == null || mobile == undefined || mobile == NaN){
                $.toast("手机号不能为空",1500);
                return;
            }
            if(msgcode == null || msgcode == undefined || msgcode == NaN){
                $.toast("验证码不能为空",1500);
                return;
            }
            if(birthday == null || birthday == undefined || birthday == NaN){
                $.toast("生日不能为空",1500);
                return;
            }
            var params = {};
            params.merchantId = merchantId;
            params.openId = openId;
            params.subOpenId = subOpenId;
            params.nickName = nickName;
            params.mobile = mobile;
            params.msgcode = msgcode;
            params.birthday = birthday;
            $.post("registMember", params, function (res) {
                if (res.code == 200) {
                    window.location.href = "/api/member/index?merchantId=" + merchantId + "&openId=" + openId + "&subOpenId=" + subOpenId;
                } else {
                    $.toast(res.message, "cancel");
                }
            }, 'json')
        });
    })
</script>
</body>
</html>
